<script setup>
import { ref, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import api from '@/apis'
import { showNotify } from 'vant'
import Record from './component/record.vue'
const { t } = useI18n()
const show = ref(false)
const tabs = ref([
  {
    text: '我的资产',
    value: 1
  },
  {
    text: '资产记录',
    value: 2
  }
])
const activeTab = ref(1)
const isHidden = ref(false)
const tabChange = (value) => {
  activeTab.value = value
}
const handleHidden = () => {
  isHidden.value = !isHidden.value
}
</script>
<template>
  <div class="container">
    <div class="body px-30 pt-40px">
      <div class="card px-30 pt-30px pb-43px mb-30">
        <div class="flex items-center mb-38">
          <div class="h-32 w-10 bg-[#D3ED06] rounded-[154px]"></div>
          <div class="ml-12 text-[32px] font-700 text-[#000] font-roboto line-height-32px">
            我的钱包
          </div>
        </div>
        <div class="flex items-center mb-20">
          <div class="text-[26px] font-400 text-[#AEB8B7] font-roboto mr-10px">预估总资产</div>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="14"
            height="14"
            viewBox="0 0 28 28"
            fill="none"
            @click="handleHidden"
          >
            <path
              d="M25.3197 11.3523C22.5626 7.616 18.5157 5.25 13.9964 5.25C9.4761 5.25 5.44673 7.616 2.67298 11.3523C1.44885 12.9999 1.44885 15.4473 2.67298 17.0958C5.44673 20.832 9.49273 23.198 13.9955 23.198C18.5157 23.198 22.546 20.832 25.3197 17.0958C26.5439 15.4481 26.5439 13.0008 25.3197 11.3523ZM13.9999 20.076C12.4919 20.0744 11.0462 19.4746 9.97997 18.4084C8.91371 17.3421 8.31397 15.8964 8.31235 14.3885C8.31235 11.2525 10.8639 8.701 13.9999 8.701C17.1359 8.701 19.6874 11.2525 19.6874 14.3885C19.6874 17.5254 17.1359 20.076 13.9999 20.076ZM13.9999 10.451C12.9557 10.4515 11.9545 10.8665 11.2161 11.6048C10.4778 12.3431 10.0628 13.3444 10.0624 14.3885C10.0624 16.5629 11.8264 18.326 13.9999 18.326C16.1734 18.326 17.9374 16.5629 17.9374 14.3885C17.9374 12.2159 16.1734 10.451 13.9999 10.451Z"
              fill="#AEB8B7"
            />
          </svg>
        </div>
        <div class="text-[54px] font-800 text-[#000] font-roboto mb-34px">
          {{ isHidden ? '*********' : '$480,393.84' }}
        </div>
        <div class="rounded-24px px-30 py-34 bg-[#F9F9F9] flex items-center justify-between mb-30">
          <div>
            <div class="text-[24px] font-400 text-[#AEB8B7] font-roboto mb-14">今日盈亏</div>
            <div class="flex items-center">
              <div class="text-[36px] font-800 text-[#000] font-roboto">$27.59</div>
              <div
                class="text-20px text-[#000] font-400 font-roboto px-20 py-6 bg-[#D3ED06] rounded-[10px] ml-14"
              >
                +2.86%
              </div>
            </div>
          </div>
          <div class="mr-68px">
            <div class="text-[24px] font-400 text-[#AEB8B7] font-roboto mb-14">我的算力</div>
            <div class="flex items-center">
              <div class="text-[36px] font-800 text-[#000] font-roboto">27.59M</div>
            </div>
          </div>
        </div>
        <div class="flex items-center gap-20px">
          <div
            class="text-[28px] font-500 text-[#FFFFFF] font-roboto withdrawal flex items-center justify-center h-90px w-50%"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 41 41"
              fill="none"
            >
              <path
                d="M6.1582 27.2695C6.16853 27.9401 6.38815 28.5908 6.78711 29.1299C8.10437 31.0288 11.4271 32.3 15.584 32.7109V32.6963C15.9915 33.5444 16.5014 34.3395 17.1035 35.0625C17.7077 35.7928 18.4026 36.4435 19.1699 37H18.4922C14.9777 37 11.8135 36.2542 9.56641 35.0625C7.45983 33.9487 6.15825 32.4388 6.1582 30.7734V27.2695ZM25.5908 18.2998C28.0566 18.313 30.4167 19.3051 32.1514 21.0576C33.886 22.8101 34.8538 25.1798 34.8418 27.6455C34.8421 29.4986 34.291 31.31 33.2598 32.8496C32.2285 34.3891 30.7635 35.5881 29.0498 36.293C27.3362 36.9978 25.4517 37.1769 23.6357 36.8086C21.8197 36.4402 20.1532 35.5406 18.8496 34.2236C17.5461 32.9067 16.6633 31.2318 16.3135 29.4121C15.9637 27.5924 16.1634 25.7093 16.8857 24.0029C17.6082 22.2967 18.8212 20.8435 20.3711 19.8281C21.9211 18.8127 23.738 18.2806 25.5908 18.2998ZM25.5693 25.4639H20.2852V29.9951H25.5713V33.7686L31.2773 27.54L25.5693 21.6895V25.4639ZM6.15332 21.04C6.15332 23.7738 9.66361 25.6776 14.5039 26.333C14.4325 26.7677 14.39 27.209 14.3662 27.6523C14.3773 28.1467 14.4177 28.6403 14.4873 29.1299C14.5491 29.573 14.6376 30.012 14.7529 30.4443L14.7617 30.4531C13.2065 30.211 11.6895 29.7663 10.25 29.1299C7.74974 27.9987 6.15332 26.3737 6.15332 24.5439V21.04ZM6.15332 14.8135C6.15332 15.4061 6.36771 15.9447 6.6748 16.4551C8.02442 18.6915 12.0732 20.1104 17.0693 20.3311C16.1094 21.4838 15.387 22.815 14.9434 24.248C9.8737 23.4759 6.15342 21.1444 6.15332 18.3154V14.8135ZM21.6377 3.99707C24.114 4.33017 26.2812 5.03311 27.8838 5.99121C29.7026 7.07686 30.8014 8.47626 30.8037 10.0117V12.125C30.8124 13.6498 29.7004 15.0455 27.8857 16.127C27.7063 16.2329 27.5244 16.3429 27.332 16.4424C26.7827 16.3451 26.2269 16.2913 25.6689 16.2783C25.6388 16.2783 25.6085 16.2841 25.5762 16.2842C24.9642 16.2885 24.3584 16.3513 23.7637 16.4551C22.1378 16.7328 20.5937 17.3684 19.2432 18.3154H18.4883C15.0472 18.3154 11.9387 17.6036 9.7002 16.4551C7.5096 15.3305 6.15353 13.7908 6.15332 12.0889V10.0117C6.15369 7.12888 10.0272 4.70651 15.2998 3.99707H21.6377Z"
                fill="#D3ED06"
              />
            </svg>
            <div class="ml-8">提现</div>
          </div>
          <div
            class="text-[28px] font-500 text-[#000000] font-roboto transfer flex items-center justify-center h-90px w-50%"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="20"
              height="20"
              viewBox="0 0 37 37"
              fill="none"
            >
              <g clip-path="url(#clip0_46_85)">
                <path
                  d="M23.0942 25.9112L15.8272 28.8584H34.6641C35.688 28.8584 36.5258 28.0208 36.5258 26.9965V25.9112H23.0942ZM34.6641 10.3627H30.7484L34.0034 18.3899C34.4829 19.5709 34.1154 20.8882 33.188 21.667H36.5258V12.224C36.5258 11.2002 35.688 10.3627 34.6641 10.3627ZM6.1879 29.6708C6.5727 30.6202 7.66378 31.0813 8.6126 30.6964L32.0445 21.1936C32.9933 20.8088 33.4549 19.7178 33.0699 18.769L32.6615 17.7631L5.77996 28.6649L6.1879 29.6708ZM27.5178 5.07863C27.133 4.13021 26.042 3.6687 25.0927 4.05351L1.66135 13.5564C0.712567 13.9413 0.250975 15.0322 0.635754 15.981L4.1844 24.7317L31.0665 13.8294L27.5178 5.07863Z"
                  fill="black"
                />
              </g>
              <defs>
                <clipPath id="clip0_46_85">
                  <rect width="36" height="36" fill="white" transform="translate(0.5 0.5)" />
                </clipPath>
              </defs>
            </svg>
            <div class="ml-8">提现</div>
          </div>
        </div>
      </div>
      <div class="card px-30 pt-30px pb-56px">
        <div class="flex items-center gap-60 mb-44px">
          <div
            :class="[
              'relative text-[#000000]/40 text-30px font-roboto line-height-32px',
              activeTab === tab.value ? 'select' : ''
            ]"
            v-for="(tab, index) in tabs"
            :key="index"
            @click="() => tabChange(tab.value)"
          >
            {{ tab.text }}
          </div>
        </div>
        <Record :activeTab="activeTab" />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.van-hairline--surround {
  padding: 6px 10px;
  border-radius: 6px;
}

.container {
  width: 100%;
  min-height: 100vh;
  background: #f1f5f8;

  // padding-top: calc(220px / 2);
  // height: 100vh;
  // display: flex;
  // flex-direction: column;
  // background-color: #f5f5f5;
  .body {
    width: 100%;
    position: relative;
  }
}

.card {
  border-radius: 30px;
  background: #fff;

  /* 11 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}

.transfer {
  border-radius: 20px;
  background: var(--3, linear-gradient(180deg, #d3ed06 0%, #9ac819 100%));

  /* 11 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}
.withdrawal {
  border-radius: 20px;
  background: var(--1, linear-gradient(180deg, #4a4a4a 0%, #000001 100%));

  /* 11 */
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.15);
}
.select {
  color: #000;
  font-weight: 700;
  &::after {
    content: '';
    position: absolute;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 44px;
    height: 6px;
    // flex-shrink: 0;
    border-radius: 154px;
    background: #d3ed06;
  }
}
</style>
